﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>flexbox | flex item with percentage size</title>
<link rel="author" href="http://shaofei.name" title="winter">
<link rel="help" href="http://www.w3.org/TR/css3-flexbox/#flex-items">
<style>
#test 
{
    background: blue;
    display: -webkit-flex;
    display: flex;
    height:300px;
}
#test>div.flex {
    width: 100px;  
    background:red;
}
#test>div.fixed 
{  
    height: 300px;
    -webkit-flex:1;
    flex:1;
    background:red;
}
#test p 
{
    margin:200px 0 0 0;
}

</style>
</head>
<body>

<div id="test">
    <div class="fixed">
        <p style="width:100px;height:100px;background:orange;">
        a
        </p>
    </div>
    <div class="flex">
        <p style="width:100px;height:100px;background:green;">
        b
        </p>
    </div>
</div>

</body>
</html>
